<template>
  <div class="arbitration-container">
    <n-card :title="cardTitle" class="arbitration-card">
      <!-- 仲裁书正文 -->
      <div class="arbitration-text" v-if="arbitrationText">
        <n-input type="textarea" v-model:value="arbitrationText" readonly :rows="15"/>
      </div>
    </n-card>
  </div>
</template>
<style scoped>
.arbitration-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.arbitration-text {
  margin-top: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  text-align: left;
}
</style>
<script setup>
import {ref, onMounted,onUnmounted} from 'vue';
import request from '../utils/request'
import {useMessage} from "naive-ui";
const arbitrationText = ref('');
const message = useMessage()
let retryCount = 0;
const maxRetries = 10;
let timer = null;
const cardTitle = ref('文件生成中，请稍后...');

const fetchData = async () => {
  try {
    const response = await request.get('/api/order/last_one');
    if (response.data && response.data.data) {
      cardTitle.value = '仲裁书已生成';
      arbitrationText.value = response.data.data;
      clearInterval(timer); // 成功后清除定时器
    } else {
      throw new Error('No data received');
    }
  } catch (error) {
    console.error('请求仲裁书数据错误:', error);
    retryCount++;
    if (retryCount < maxRetries) {
      timer = setTimeout(fetchData, 8000); // 8秒后重试
    } else {
      cardTitle.value = '仲裁书生成失败';
      arbitrationText.value = "生成仲裁书失败，请邮件或电话联系网站管理员";
      message.error('请求仲裁书数据失败，请邮件或电话联系网站管理员');
      clearInterval(timer); // 超过最大重试次数后清除定时器
    }
  }
};

onMounted(() => {
  fetchData(); // 初始请求
});

onUnmounted(() => {
  clearInterval(timer); // 组件卸载时清除定时器
});
</script>